<template>
    <div>
        <div class='title2'>添加任务：<input v-model='val'
        @keyup.13="addTask" placeholder="输入任务名称...">
        <button @click="addTask">add</button></div>
            <div class='container'>
                <div class='task-container'>
                    <div class='left-one' @click="change('done')">已完成({{ doneCheck }}) </div>
                    <div class='left-one' @click="change('undo')">未完成({{ undoCheck }})</div>
                    <div class='left-one' @click="change('all')">所有({{ allCheck }})</div>
                </div>
                <div class='item-container'>
                    <ListItem
                    v-for='(item,index) in tasks'
                    :key='item.id'
                    :task='item'
                    @check='check'
                    :index='index'
                    @remove='remove'
                    />
                </div>
            </div>
    <!-- eslint-disable-next-line vue/no-parsing-error -->
    </div>
</template>

<script>
import { nanoid } from 'nanoid';

import ListItem from './ListItem.vue';

export default {
  components: {
    ListItem,
  },
  data() {
    return {
      val: '',
      list: [],
      status: 'undo',
    };
  },
  methods: {
    change(v) {
      this.status = v;
    },
    addTask() {
      if (this.val) {
        this.list.push({
          name: this.val,
          checked: false,
          id: nanoid(),
        });
        this.val = '';
      }
    },
    check(item) {
      // eslint-disable-next-line no-param-reassign
      item.checked = !item.checked;
    },
    remove(item) {
      const index = this.list.findIndex((ele) => item.id === ele.id);
      this.list.splice(index, 1);
    },

  },
  computed: {
    tasks() {
      if (this.status === 'undo') {
        return this.list.filter((item) => !item.checked);
      }
      if (this.status === 'done') {
        return this.list.filter((item) => item.checked);
      }
      return this.list;
    },
    undoCheck() {
      const array = this.list.filter((item) => !item.checked);
      return array.length;
    },
    doneCheck() {
      const array = this.list.filter((item) => item.checked);
      return array.length;
    },
    allCheck() {
      return this.list.length;
    },
  },
};
</script>

<style lang="scss" scoped>
    // .title{
    //     width: 100%;
    //     background-color: rgb(74, 182, 254);
    //     height: 35px;
    //     line-height: 35px;
    //     text-align: center;
    //     color: white;
    // }
    .title2{
        text-align: center;
        margin-top:50px
    }
    .container{
        display: flex;
        width: 600px;
        margin-left:828px;
        margin-top:49px;
        height: 260px;
    }
    .task-container{
        border-right: 1px solid rgb(234, 234, 234);
        width: 50px;
        margin-left:-90px
    }
    .item-container{
        margin-left:90px
    }
    .left-one{
        margin-bottom: 20px;
        cursor: pointer;
    }
    .left-one:hover{
        background-color: blanchedalmond;
    }
    input{
        width:280px;
        height: 20px;
        border-radius: 7px;
        outline: none;
        border:none;
        background-color: rgb(245, 245, 245);
    }
    button{
        height: 20px;
        border-radius: 7px;
        outline: none;
        border:none;
        background-color: red;
        color:white;
        cursor: pointer;
    }
</style>
